<template>
  <div>
    <el-card>
      <h5 class="titie">管理员信息</h5>
      <h5>
        管理员Id: <span>{{ usre.id }}</span>
      </h5>
      <h5>
        账号：<span>{{ usre.account }}</span>
      </h5>
      <h5>
        用户组: <span>{{ usre.userGroup }}</span>
      </h5>
      <h5>
        创建时间: <span>{{ usre.ctime }}</span>
      </h5>
      <div class="photo">
        管理员头像
        <el-upload
          :data="uers"
          style="margin-left: 15px"
          class="avatar-uploader"
          action="http://127.0.0.1:5000/users/avatar_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
import { bus, gettime } from "@/utils/utils";
import { accountinfo } from "@/apis/user";
export default {
  data() {
    return {
      usre: {},
      imageUrl: "",
      uers: { id: localStorage.uses },
    };
  },
  created() {
    let a = JSON.parse(localStorage.getItem("uses"));
    accountinfo({ id: a }).then((res) => {
      console.log(res);
      res.data.accountInfo.ctime = gettime(res.data.accountInfo.ctime);
      this.usre = res.data.accountInfo;
    });
  },
  methods: {
    // 头像上传
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.imageUrl = URL.createObjectURL(file.raw);
      bus.$emit("photo", this.imageUrl);
    },
  },
};
</script>

<style lang="less" scoped>
.titie {
  font-size: 16px;
}
h5 {
  font-size: 14px;
  margin-bottom: 15px;

  font-weight: normal;
  line-height: 40px;
  border-bottom: 1px solid rgb(235, 232, 232);
  color: rgb(110, 107, 107);
}
.photo {
  color: rgb(110, 107, 107);
  align-items: center;
  display: flex;
}
.avatar-uploader,
.el-upload {
  width: 130px;
  height: 130px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>